Use these to jump around or read it all...
[Navigator Vs. IE]
[No Margins - Navigator]
[No Margins - IE]
[Do It With Frames]
Navigator vs. IE
As with most fun things on the Web today, it takes two sets of commands to get the same effect on both browsers. But fear not, as also with things on the Web today, both sets of commands will fit nicely on the same page and not bump into one another. The commands not understood by the browser will simply be ignored and those the browser does understand will be put into action.
Here's the Deal:
- Netscape Navigator is a little late to the no margins party. Version 4.0 and above grasps the concept of three margin commands when entered into the BODY tag: marginheight, marginwidth, and the overriding spacing.
- MSIE 3.0 is the starting point for margin manipulation for the Microsoft browser. There are a myriad of methods for killing margins there. In addition to grasping the four commands above, the browser also offers five style sheet command, one for each of the four sides and one for the total margin picture: margin-left, margin-right, margin-top, margin-bottom, and just simply margin for all four sides.
- In addition to the format above, MSIE also allows the use of frames to create a margin-less page.
- Is it just me or is the command "margin-bottom" just silly?
No Margins - Navigator
You know, I keep saying "no margins" since that's what prompted this tutorial, but in reality you can use these commands to create big huge margins by setting the commands to big huge numbers. You have control! Ah! The power! The power!
The concept here is as simple as it gets. Use one of three attributes,
or just the spacing attribute, inside the document's BODY tag to set the margins. Like so:
<body bgcolor="#ffffff" marginheight="0" marginwidth="0">
~OR~
<BODY BGCOLOR="#ffffff" spacing="0">
Would you like to see it in action? If so, open this page in a Netscape browser.
Obviously, using all four will give you greater control over each element in the browser window. Play with them, they're free. See what they do. Make them do tricks. Make them the new Pokemon!
No Margins - IE
No Margins - IE? You know if you say that heading out loud and real fast is sounds like you're in Texas and really happy about learning this.
OK! Enough comedy jokes! Let's get to it.
At this point, you're actually done because what I've shown you will work in both browsers. But, as I've been told many times before, it wouldn't be an HTML Goodies tutorial if I didn't beat a point literally into the ground.
In order to assure no borders across browsers, I use both the Netscape commands I showed above and Style Sheet commands to affect IE. Again, if you want control of each of the sides, you can use these four:
- margin-left
- margin-right
- margin-top
- margin-bottom
You can specify margin widths in points (pt), inches (in), centimeters (cm), or pixels (px). Here's a quick example of each:
BODY {margin-left: 2pt}
BODY {margin-right: 12in}
BODY {margin-top: 45cm}
BODY {margin-bottom: 12px}
If you want to set any of the items to nothing, no indication of points, inches, pixels, or centimeters is needed. Just a zero will do.
Last but not least, if you wish to kill all margins, use the command "margin". here's a style block set to kill all margins around all sides of the IE browser window:
<HEAD>
<STYLE TYPE="text/css">
<!--
BODY {margin: 0}
-->
</STYLE>
</HEAD>
And here it is in action. Make sure you're using an IE browser, please.
Do It With Frames
I offer this method first because it works, but in all honesty it's a bit of overkill. What you have above does a superb job. There's no need to use anything else, but just remember that "beat an idea into the ground" statement earlier in this brilliant piece of tutorial. (You think this is bad, you should hear me in class.)
In this instance we'll set up a frameset with two frame windows. One will be set to zero and the other will be set to 100%. The concept is to allow the commands within the framesets to set the margin gutter to zero. Here's the code:
<FRAMESET COLS="0,100%" BORDER="0" FRAMESPACING="0" MARGINHEIGHT="0" MARGINWIDTH="0">
<FRAME SRC="invis.html" BORDER="0" FRAMESPACING="0" MARGINHEIGHT="0" MARGINWIDTH="0">
<FRAME SRC="noborderright.html" BORDER="0" FRAMESPACING="0" MARGINHEIGHT="0" MARGINWIDTH="0">
</FRAMESET>
The frameset is in columns with all elements set to zero. Ditto each element in each of the two frame SRCs. Here's the result.
Now, if you're using an MSIE browser, you got the correct effect. Those of you with Navigator probably didn't get the items butting right up against the left side. That's another downfall of this method, it's an IE-only deal in this format.
Yes, you can get Navigator to work with this format, but you will need to put the commands discussed above on the page that will appear in the 100% frame window. If you do that, then there's no need for the frames anyway. Just go with the border commands on a single page sans frames.
That's That
I actually like a little gutter around each side of my browser window. I think the background butting right up to the side is enough to pull it all together - but to each their own. If this is the effect you're looking for, now you have the tools to get the look across browsers.
Enjoy!
[Navigator Vs. IE]
[No Margins - Navigator]
[No Margins - IE]
[Do It With Frames]
IE 7
Firefox 2.0
